import cx from 'classnames';
import React, { useMemo } from 'react';

import { isNullOrUndefined } from '../../../utils';
import { TABLE_INDEX } from '../../config';
import { getColumn, getColumnPinningStyle } from '../../utils';

import type { Column } from '@tanstack/react-table';
import type {
  AnyObject,
  ColumnMeta,
  ColumnPinning,
  ColumnPinningInfo,
  Size,
} from '../../type';
import type { SettingCheckBoxInfo } from '../DisplayTable';

export interface Props<T extends AnyObject> {
  isShowBoxShadow?: boolean;
  bordered?: boolean;
  prefixCls?: string;
  size?: Size;
  columnPinning: ColumnPinning;
  columnPinningInfo: ColumnPinningInfo;
  columnSummary: SettingCheckBoxInfo;
  dataSource: T[];
  columns: Column<T>[];
}
function TableSummary<T extends AnyObject>(props: Props<T>) {
  const {
    prefixCls,
    bordered,
    columnPinningInfo,
    columnPinning,
    isShowBoxShadow,
    columnSummary,
    dataSource,
    columns,
    size,
  } = props;
  const summary = useMemo(() => {
    const summary: { [key in string]?: number } = {};

    if (columns && columns.length) {
      const summaryColumns = Object.keys(columnSummary).filter(
        (id) => columnSummary[id],
      );
      for (let id of summaryColumns) {
        if (isNullOrUndefined(summary[id])) summary[id] = 0;
        dataSource.forEach((data) => {
          if (!isNullOrUndefined(data[id])) {
            summary[id] += data[id];
          } else {
            const column = getColumn(id, columns);
            const columnMeta = (column.columnDef.meta as ColumnMeta<T>) || {};
            const { dataKey } = columnMeta;
            summary[id] += data[dataKey];
          }
        });
      }
    }

    return summary;
  }, [dataSource, columns, columnSummary]);

  return (
    <div className={cx(`${prefixCls}-summary`)}>
      <div role="row" className={`${prefixCls}-tr`}>
        <div className={`${prefixCls}-tr-box`}>
          <div className={`${prefixCls}-tr-content`}>
            {columns.map((column) => {
              const columnMeta = (column.columnDef.meta as ColumnMeta<T>) || {};
              const { align, className } = columnMeta;
              const style: React.CSSProperties = {
                ...getColumnPinningStyle(
                  column.id,
                  columnPinningInfo,
                  columnPinning,
                  isShowBoxShadow,
                ),
                width: isNaN(column.getSize()) ? 'auto' : column.getSize(),
              };

              return (
                <div
                  role="cell"
                  key={column.id}
                  className={cx(`${prefixCls}-td`, { bordered, className })}
                  style={style}
                >
                  <div className={cx(`${prefixCls}-td-element`, size, align)}>
                    {column.id === TABLE_INDEX
                      ? '小计'
                      : summary[column.id]?.toFixed(2)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default TableSummary;
